<template>
	<view class="">
		<!-- 修改记忆碎片页面 -->
	    <view class="xm-padding-30r">
	    	<view class="xm-flex-c xm-padding-30r" style="width: 100%;height: auto;background-color: #FFFFFF;border-radius: 20rpx;box-sizing: border-box;">
	    		<view class="xm-flex-r xm-justify-center" style="align-items: center;margin-top: 30rpx;">
	    			<view class="">
	    				标题：
	    			</view>
					<input maxlength="15" type="text" value="" v-model="fragmentData.title==undefined?'':fragmentData.title" placeholder="请输入标题" style="padding-left: 10rpx;box-sizing: border-box;width: 70%;height: 60rpx;border-bottom: 4rpx #30CCC8 solid;"/>
	    		</view>
				<view class="xm-padding-30r xm-border-box" style="width: 100%;height: auto;margin-top: 20rpx;border: 3rpx #30CCC8 solid;margin-top: 60rpx;border-radius: 20rpx;">
					
					<view class="xm-flex-r xm-justify-between">
						
						<view class="xm-fontsize-25">
							简介：
						</view>
						<view class="xm-fontsize-15" style="color: #6c6c6c;">
							不多于40字
						</view>
						
					</view>
					
					<textarea maxlength="40" class="xm-fontsize-20" v-model="fragmentData.hint" value="" placeholder="简单介绍的" style="width: 100%;margin-top: 20rpx;height: 100rpx;line-height: 50rpx;"/>
					
				</view>
				
				<view class="xm-flex-r xm-padding-30r xm-justify-between" style="padding-right: initial;">
					
					<view class="xm-fontsize-30">
						主体 :
					</view>
					
					<view class="xm-flex-rr xm-fontsize-25" style="align-items: center;">
						
						<view  @click="open" class="" style="border: 2rpx #30CCC8  solid;height: 47rpx;line-height: 47rpx;padding-left: 20rpx;padding-right: 20rpx;margin-left: 20rpx;border-radius: 10rpx;background-color: #E1E1E1;color: #d94259;">
							点击修改标签
						</view>
						
						<view v-if="fragmentData.label!=undefined" class="" style="height: 47rpx;line-height: 47rpx;padding-left: 20rpx;padding-right: 20rpx;margin-left: 20rpx;border-radius: 10rpx;background-color: #E1E1E1;color:#30CCC8 ;">
							{{fragmentData.label}}
						</view>
						
					</view>
					
				</view>
				<view class="xm-padding-30r xm-border-box" style="width: 100%;height: auto;border: 3rpx #30CCC8 solid;border-radius: 20rpx;">
					
					<textarea maxlength="-1" class="xm-fontsize-20" value="" v-model="fragmentData.body" placeholder="主体" style="width: 100%;height: 400rpx;line-height: 50rpx;overflow: hidden;overflow: scroll;"/>
					
					<view class="xm-flex-c xm-padding-20r xm-border-box"
						style="width: 100%;height: auto;background-color: #e2e2e2;margin-top: 30rpx;margin-bottom: 30rpx;border-radius: 20rpx;">
					
						<view class="xm-flex-r xm-flex-wrap" style="width: 100%;height: 230rpx;">
							<view class="" @click="upIcon()"
								style="width: 100rpx;height: 100rpx;border-radius: 10rpx;margin-bottom: 20rpx;">
								<image src="../../static/images/icon/add2.png"
									style="width: 100rpx;height: 100rpx;background-color: #e0c4e7;box-sizing: border-box;padding: 15rpx;border-radius: 10rpx;"
									mode="widthFix"></image>
							</view>
					
							<view class="" v-if="imgs.length > 0" v-for="(item,index) in imgs" :key="index" @click="deletImg(index)"
								style="position: relative;width: 100rpx;height: 100rpx;border-radius: 10rpx;background-color: #FFFFFF;margin-left: 20rpx;margin-bottom: 20rpx;">
								<view class="">
									
								</view>
								<image :src="item" style="width: 100%;height: 100%;border-radius: 10rpx;" mode=""></image>
							</view>
					
						</view>
						<view class="xm-fontsize-25" style="color: #707070;">
							点击添加图片 (最多可添加三张图片)
						</view>
					</view>
					
					<view class="xm-flex-r xm-justify-between" style="align-items: center;">
						<view class="xm-flex-r xm-fontsize-25" style="align-items: center;">
							是否公开
							<view class="xm-flex-r" style="align-items: center;width: 50rpx;border-radius: 50%;border:6rpx #30CCC8 solid;height: 50rpx;margin-left: 20rpx;line-height: 40rpx;">
								<view v-show="showType" :class="[fragmentData.typeopen==-1?'On':'selectOn']" @click="fragmentData.typeopen=-fragmentData.typeopen" style="margin: auto;width: 30rpx;height: 30rpx;border-radius: 50%;"></view>
							</view>
						</view>
						<view @click="updateFragment()" class="xm-fontsize-30" style="width: 251rpx;height: 65rpx;border-radius: 20rpx;text-align: center;line-height: 65rpx;color: #FFFFFF;background: linear-gradient(to right,#47F2EE,#8D8D8D);">
							确认修改
						</view>
					</view>
					
				</view>
				
				
				
	    	</view>
			
			<view class="">
				<uni-popup ref="popup" :mask-click="false">
					<view class="xm-padding-30r" style="width:600rpx;height: 600rpx;background-color: #FFFFFF;border-radius: 20rpx;background: url(https://t7.baidu.com/it/u=3168329137,3263381309&fm=193&f=GIF);">
						<view class="xm-flex-r xm-justify-between" style="margin-top: 30rpx;">
							<view  class="xm-flex-r xm-fontsize-30" style="align-items: center;">
								请选择标签 :
								
								<view v-if="fragmentData.label!=undefined" class="xm-fontsize-20" style="color: #3e783a; width: 114rpx;height: 47rpx;line-height: 47rpx;text-align: center;margin-left: 20rpx;border-radius: 10rpx;background-color: #bbd2d8;">
									{{fragmentData.label}}
								</view>
							</view>
							<image @click="close" src="../../static/images/icon/out2.png" style="width: 50rpx;margin-top: -40rpx;" mode="widthFix"></image>
							<!-- <view class="" style="width: 160rpx;height: 57rpx;line-height: 57rpx;border: 4rpx #26ACD4 solid;border-radius: 20rpx;text-align: center;">
								确定
							</view> -->
						</view>
						
						<view class="xm-grid-c4fr xm-grid-g30" style="width: 100%;height: auto;margin-top: 40rpx;text-align: center;">
							
							<view v-for="(item,index) in lab" @click="fragmentData.label=item" :class="[item!=fragmentData.label?'labclass xm-fontsize-20':'selectlab xm-fontsize-20']" style="height: 47rpx;line-height: 47rpx;width: 114rpx;margin: auto;border-radius: 10rpx;">
								{{item}}
							</view>
							
							
						</view>
						<view class="xm-fontsize-30" style="margin-top: 30rpx;margin-bottom: 30rpx;">
							自定义标签
							
						</view>
						<input type="text" value="" maxlength="5" v-model="fragmentData.label" placeholder="请输入你想要的标签"  style="padding-left: 10rpx;border-bottom: 4rpx #26ACD4 solid;height: 60rpx;line-height: 60rpx;"/>
						
						<view class="xm-flex-rr " @click="close()" style="width: 100%;margin-top: 30rpx;">
							<view class="" style="width: 160rpx;height: 57rpx;line-height: 57rpx;border: 4rpx #26ACD4 solid;border-radius: 20rpx;text-align: center;">
								确定
							</view>
						</view>
					</view>
					<!-- <button @click="close">关闭</button> -->
				</uni-popup>
			</view>
			
	    </view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showType:true,
				fg_id:undefined,
				fragmentData:undefined,
				lab:undefined,
				imgs:[]
			}
		},
		onLoad(data) {
			this.fg_id = data.id
			this.getFragment();
			this.getLab();
		},
		methods: {
			open() {
				this.$refs.popup.open('top')
			},
			close() {
				this.$refs.popup.close()
			},
			getFragment(){
				var that = this
				this.$http(this.$url.fragment.findone,"post",{
					fg_id:this.fg_id
				},{
					'content-type': 'application/json'
				}).then(res=>{
					console.log(res);
					if(res.data.imgs!=undefined){
						that.imgs = res.data.imgs.split(",")
					}
					this.fragmentData = res.data
				})
			},
			getLab(){
				this.$http(this.$url.fragment.lab,"get")
				.then(res=>{
					console.log(res);
					this.lab = res.lab
					console.log(this.lab);
				})
			},
			updateFragment(){
				
				if(this.fragmentData.title==""){
					this.$api.msg("请输入标题")
					return false
				}
				// console.log(this.fragment);
				if(this.imgs.length > 0){
					this.fragmentData.imgs = this.imgs.join(",")
					// console.log(this.fragment.imgs);
				}
				this.$http(this.$url.fragment.update,"post",this.fragmentData, {
					'content-type': 'application/json'
				}).then(res=>{
					console.log(res);
					this.$api.msg("修改成功")
					this.$api.gotoType('tab','./mylist')
				})
			},
			deletImg(index){
				var that = this
				uni.showModal({
					content: '确定删除图片吗？',
					success: function (res) {
						if (res.confirm) {
							that.imgs.splice(index,1)
						} else if (res.cancel) {
							
						}
					}
				});
				
			},
			upIcon() {
				let self = this
				uni.chooseImage({
					count:1,
					success: (chooseImageRes) => {
						uni.showLoading({
							title:"加载图片中"
						})
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: self.$url.user.upfile, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								var value = JSON.parse(uploadFileRes.data);
								console.log(value);
								self.imgs.push(self.$url.apiimg+value.url)
							},
							complete() {
								setTimeout(function(){
									uni.hideLoading();
								},300);
							}
						});
					},
					fail: err => {
						console.log(err)
					}
				});
			}
			
			
		}
	}
</script>

<style>
	
	page{
		box-sizing: border-box;
		background-color: #e1e1e1;
	}
	.selectOn{
		background-color: #8c988b;
	}
	.On{
		background-color: #FFFFFF;
	}
	.labclass{
		background-color: #b5bab7;
		color: #FFFFFF;
	}
	.selectlab{
		background-color: #8a90ff;
		color: #29fcff;
	}
</style>
